<template>
	<el-backtop :bottom="60"></el-backtop>
	<el-container class="home-container">
		<!--头部布局-->
		<el-header>
			<div>
				<!-- <img src="../assets/logo.png" alt class="logo_img" /> -->
				<span>健康档案管理系统</span>
			</div>
		</el-header>
		<el-container>
			<!--侧边布局-->
			<el-aside :width="isCollapse ?'64px':'200px'">
				<el-menu background-color="#0998cb" text-color="#fff" active-text-color="#000000" unique-opened
					:collapse="isCollapse" :collapse-transition="false" :router="true" :default-active="$route.path">
					<el-menu-item index="/student" key="1">
						<i class="el-icon-menu"></i>
						<template #title>学生管理</template>
					</el-menu-item>
					<el-menu-item index="/healthform" key="2">
						<i class="el-icon-menu"></i>
						<template #title>体检管理</template>
					</el-menu-item>
					<el-menu-item index="/medicalchart" key="3">
						<i class="el-icon-menu"></i>
						<template #title>病例管理</template>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<!--主体布局-->
			<el-main>
				<!--路由占位符-->
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>


</template>

<script>
	export default {
		
	};
</script>

<style lang="less" scoped>
	.el-header {
		background-color: #0998cb;
		display: flex;
		justify-content: space-between; // 左右贴边
		padding-left: 0%; // 左边界
		align-items: center; // 水平
		color: #fff;
		font-size: 20px;

		>div {
			//左侧div加布局
			display: flex;
			align-items: center;

			span {
				margin-left: 15px;
			}
		}
	}

	.el-aside {
		background-color: #0998cb;

		.el-menu {
			border-right: none; // 对其右边框
		}
	}

	.el-main {
		background-color: #eaedf1;
	}

	.home-container {
		height: 100%;
	}

	.logo_img {
		width: 20%;
		height: 100%;
	}

	.iconfont {
		margin-right: 10px;
	}

</style>
